<template>
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-position="right">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="版位">
                            <el-select v-model="searchForm.position" placeholder="请选择版位" clearable :style="selectWidth">
                                <el-option label="企业产品横幅广告" value="0" />
                                <el-option label="首页横幅" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="onSearch"><el-icon><Search /></el-icon>搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <!-- 表格部分 -->
        <el-card style="margin-top:10px">
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="50" />
                <el-table-column prop="name" label="名称"/>
                <el-table-column prop="position" label="版位"/>
                <el-table-column prop="totalClick" label="总点击数" sortable :sort-method="customSortMethod('totalClick')"/>
                <el-table-column prop="totalExposure" label="总曝光数" sortable :sort-method="customSortMethod('totalExposure')"/>
            </el-table>
            <!-- 分页器 -->
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
    </div>
</template>

<script  setup>
import { ref } from 'vue'

const ids = ref([])
const multiple = ref(true)
const total = ref(50)
const selectWidth = ref('width:200px')
const selectable = (row) => ![1, 2].includes(row.id)
// 添加表单的内容
// 搜索框
const searchForm = ref({
    position: '',
    status: ''
})
const tableData = [
    {
        name: '4',
        position: '首页横幅',
        totalClick: '0',
        totalExposure: 1
    },
    {
        name: '4',
        position: '首页横幅',
        totalClick: '200',
        totalExposure: '100'
    },
    {
        name: '4',
        position: '首页横幅',
        totalClick: '100',
        totalExposure: '2'
    }
]

const queryParams = ref({
        pageNum: 1,
        pageSize: 10
})

const getList = () => {
    console.log('getList', queryParams.value)
}

// 搜索
const onSearch = () => {
    console.log('onSearch!')
}
// 排序方法
const customSortMethod = (column) => {
    return (a, b) => {
        const numA = parseInt(a[column])
        const numB = parseInt(b[column])
        if (isNaN(numA) || isNaN(numB)) {
            return 0
        }
        if (numA < numB) {
            return -1
        } else if (numA > numB) {
            return 1
        } else {
            return 0
        }
    }
}

const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.date)
    multiple.value = !selection.length
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-table {
    .el-table__header-wrapper{
        th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item{
        .el-form-item__label {
            font-weight: bold !important;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item .second_label{
        .el-form-item__label {
            font-weight: normal !important;
            margin-top: 10px;
        }
    }
    }
}
::v-deep{
.second_label{
        .el-form-item__error {
            position: static !important
        }

    }
}

</style>
